<template>
	<div class="alert">
		<div class="alert-box">
            <h2>代课</h2>
			<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="add-class-form" label-position="left">
                <el-form-item label="班级名称" prop="className">
                    <el-input v-model="form.className"></el-input>
                </el-form-item>
                <el-form-item label="选择老师" prop="teachers">
                    <el-select v-model="form.teachers" placeholder="请选择老师" class="select-block">
                        <el-option :label="v.zwm" :value="v.id + ''" v-for="v in teacherList"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="代课描述" prop="replace">
                    <el-input type="textarea" v-model="form.replace" :rows="10"></el-input>
                </el-form-item> 
            </el-form>
            <el-button type="info" class="submit" @click="submit">确定</el-button>
		</div>
	</div>
</template>

<script type="text/javascript">
	export default {
		data () {
			return {
				teacherList: [],
				form: {
                    className: '',
                    replace: '',
                    teachers: '',
                },
                rules: {
                    className: [
                        { required: true, message: '请输入班级名称', trigger: 'blur' }
                    ],
                    textbooks: [
                        { required: true, message: '请选择教材(册)', trigger: 'change' }
                    ],
                    repalce: [
                        { required: true, message: '请输入班级名称', trigger: 'blur' }
                    ]
                }
			}
		},
        methods: {
            submit () {
                this.$emit('close', true)
            }
        }
	}
</script>

<style lang="less" scoped>
    h2{
        line-height: 40px;
    }
	.select-block {
		display: block;
	}
    .submit {
        width: 120px;
    }
    .alert-box {
        padding:10px 40px;
    }
</style>